<template>
  <span> 一行三列，多出默认产生(行)隐式网格，(行)隐式网格默认是占剩余的所有高度</span>
  <div class="grid-1">
    <div class="grid-item grid-item-1">1</div>
    <div class="grid-item grid-item-2">2</div>
    <div class="grid-item grid-item-3">3</div>
    <div class="grid-item grid-item-4">4</div>
    <div class="grid-item grid-item-5">5</div>
    <div class="grid-item grid-item-6">6</div>
    <div class="grid-item grid-item-7">7</div>
    <div class="grid-item grid-item-8">8</div>
  </div>
  <span>(列)隐式网格</span>
  <div class="grid-2">
    <div class="grid-item grid-item-1">1</div>
    <div class="grid-item grid-item-2">2</div>
    <div class="grid-item grid-item-3">3</div>
    <div class="grid-item grid-item-4">4</div>
    <div class="grid-item grid-item-5">5</div>
    <div class="grid-item grid-item-6">6</div>
    <div class="grid-item grid-item-7">7</div>
    <div class="grid-item grid-item-8">8</div>
  </div>
</template>
<style lang="scss" scoped>
.grid-1 {
  width: 150px;
  height: 150px;
  background: #00f;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 50px;
  grid-template-columns: 50px 50px 50px;
  /* 默认：row 就是行产生隐式网格 */
  grid-auto-flow: row;
  /* 可以调节产生隐式网格的高度(默认是占剩余的所有高度) */
  grid-auto-rows: 40px;
}

.grid-2 {
  width: 150px;
  height: 150px;
  background: #00f;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 50px 50px 50px;
  grid-template-columns: 50px;
  grid-auto-flow: column;
  grid-auto-columns: 50px;
}
</style>
